﻿<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>RTCDataChannel Demo | Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
        
        <style>
            audio, video {
                -moz-transition: all 1s ease;
                -ms-transition: all 1s ease;
                
                -o-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                transition: all 1s ease;
                vertical-align: top;
            }

            input {
                border: 1px solid #d9d9d9;
                border-radius: 1px;
                font-size: 2em;
                margin: .2em;
                width: 30%;
            }

            .setup {
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
                font-size: 102%;
                height: 47px;
                margin-left: -9px;
                margin-top: 8px;
                position: absolute;
            }

            p { padding: 1em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }
            
            .videos-container {
                display: inline-block;
                border: 2px solid black;
                padding: .1em;
                border-radius: 0.2em;
                margin: 2em .2em;
                background: white;
                vertical-align: top;
            }
            .videos-container h2 {
                border: 0;
                border-top: 1px solid black;
                margin: 0;
                text-align: center;
                display:block;
            }
            video {
                width:20em;
                height: 15em;
                background: black;
            }
        </style>
    <!-- for HTML5 el styling -->
    <script>
        document.createElement('article');
        document.createElement('footer');
    </script>
</head>

<body>
    <article>
        <header style="text-align: center;">
                <h1>
                    RTCDataChannel Simple Demo
                </h1>            
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

        <blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px;">
                This demo is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated (published on 2013)</span>. Please try a LIVE demo here instead: <a href="https://webrtc.github.io/samples/src/content/datachannel/basic/">https://webrtc.github.io/samples/src/content/datachannel/basic/</a>
                <br><br>
                In case if above link gets broken: <a href="https://github.com/webrtc/samples">https://github.com/webrtc/samples</a>
            </blockquote>

        <table>
            <tr>
                <td>
                    <input id="from-first-peer" type="text" placeholder="Offerer">
                    <ol id="messages-sent-by-second-peer">
                    </ol>
                </td>
                <td>
                    <input id="from-second-peer" type="text" placeholder="Answerer">
                    <ol id="messages-sent-by-first-peer">
                    </ol>
                </td>
            </tr>
        </table>

        <script>
            var answererDataChannel, offererDataChannel;
            var firstPeerTextBox = document.getElementById('from-first-peer');
            var secondPeerTextBox = document.getElementById('from-second-peer');

            var firstPeerOutput = document.getElementById('messages-sent-by-second-peer');
            var secondPeerOutput = document.getElementById('messages-sent-by-first-peer');

            HTMLElement.prototype.addLI = function (message) {
                var li = document.createElement('li');
                li.innerHTML = message;
                this.insertBefore(li, this.firstChild);
            };

            firstPeerTextBox.onchange = function () {
                offererDataChannel.send(this.value);
                this.value = '';
            };

            secondPeerTextBox.onchange = function () {
                answererDataChannel.send(this.value);
                this.value = '';
            };
        </script>

        <script>
            /* RTCDataChannel implementation for chrome */

            function RTCDataChannelForChrome() {
                var iceServers = {
                    iceServers: [{
                        url: 'stun:stun.l.google.com:19302'
                    }]
                };

                var optionalRtpDataChannels = {
                    optional: []
                };

                var offerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels),
                    answerer;

                offererDataChannel = offerer.createDataChannel('RTCDataChannel', {
                    reliable: false
                });

                setChannelEvents(offererDataChannel, 'offerer');

                offerer.onicecandidate = function (event) {
                    if (!event || !event.candidate) return;
                    answerer && answerer.addIceCandidate(event.candidate);
                };

                var mediaConstraints = {
                    optional: [],
                    mandatory: {
                        OfferToReceiveAudio: false, // Hmm!!
                        OfferToReceiveVideo: false // Hmm!!
                    }
                };

                offerer.createOffer(function (sessionDescription) {
                    offerer.setLocalDescription(sessionDescription);
                    createAnswer(sessionDescription);
                }, function() {}, mediaConstraints);


                function createAnswer(offerSDP) {
                    answerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
                    answererDataChannel = answerer.createDataChannel('RTCDataChannel', {
                        reliable: false
                    });

                    setChannelEvents(answererDataChannel, 'answerer');

                    answerer.onicecandidate = function (event) {
                        if (!event || !event.candidate) return;
                        offerer && offerer.addIceCandidate(event.candidate);
                    };

                    answerer.setRemoteDescription(offerSDP);
                    answerer.createAnswer(function (sessionDescription) {
                        answerer.setLocalDescription(sessionDescription);
                        offerer.setRemoteDescription(sessionDescription);
                    }, function() {}, mediaConstraints);
                }

                function setChannelEvents(channel, channelNameForConsoleOutput) {
                    channel.onmessage = function (event) {
                        console.debug(channelNameForConsoleOutput, 'received a message:', event.data);

                        if (channelNameForConsoleOutput == 'offerer')
                            firstPeerOutput.addLI(event.data);
                        else
                            secondPeerOutput.addLI(event.data);
                    };

                    channel.onopen = function () {
                        channel.send('first text message over RTP data ports');
                    };
                }
            }
        </script>

        <script>
            /* RTCDataChannel implementation for Firefox */

            function RTCDataChannelForFirefox() {
                function setChannelEvents(channel, channelNameForConsoleOutput) {
                    channel.onmessage = function (event) {
                        console.debug(channelNameForConsoleOutput, 'received a message:', event.data);

                        if (channelNameForConsoleOutput == 'offerer')
                            firstPeerOutput.addLI(event.data);
                        else
                            secondPeerOutput.addLI(event.data);
                    };
                    channel.onopen = function () {
                        channel.send('first text message over SCTP data ports');
                    };
                }

                function useless() { }

                var iceServers = {
                    iceServers: [{
                        url: 'stun:23.21.150.121'
                    }]
                };

                var offerer = new mozRTCPeerConnection(iceServers), answerer;

                offererDataChannel = offerer.createDataChannel('channel', {});
                offererDataChannel.binaryType = 'blob';
                setChannelEvents(offererDataChannel, 'offerer');

                navigator.mozGetUserMedia({
                    audio: true,
                    fake: true
                }, function (stream) {
                    offerer.addStream(stream);

                    offerer.createOffer(function (sessionDescription) {
                        offerer.setLocalDescription(sessionDescription);
                        createAnswer(sessionDescription);
                    }, function() {}, mediaConstraints);

                }, useless);

                var mediaConstraints = {
                    optional: [],
                    mandatory: {
                        OfferToReceiveAudio: true,
                        OfferToReceiveVideo: true
                    }
                };

                function createAnswer(offerSDP) {
                    answerer = new mozRTCPeerConnection(iceServers);
                    answerer.ondatachannel = function (event) {
                        answererDataChannel = event.channel;
                        answererDataChannel.binaryType = 'blob';
                        setChannelEvents(answererDataChannel, 'answerer');
                    };

                    navigator.mozGetUserMedia({
                        audio: true,
                        fake: true
                    }, function (stream) {

                        answerer.addStream(stream);
                        answerer.setRemoteDescription(offerSDP);

                        answerer.createAnswer(function (sessionDescription) {
                            answerer.setLocalDescription(sessionDescription);

                            offerer.setRemoteDescription(sessionDescription);
                        }, function() {}, mediaConstraints);

                    }, useless);
                }
            }
        </script>

        <script>
            var isFirefox = !!navigator.mozGetUserMedia;

            if (isFirefox) RTCDataChannelForFirefox();
            else RTCDataChannelForChrome();
        </script>

        <br />
        <br />

        <h2>
            <a href="https://www.webrtc-experiment.com/docs/how-to-use-rtcdatachannel.html" target="_blank">How to use RTCDataChannel?</a>
        </h2>
        :
        <h2>
            <a href="https://www.webrtc-experiment.com/docs/rtc-datachannel-for-beginners.html" target="_blank">RTCDataChannel for Beginners!</a>
        </h2>

        <br />
        <br />
        <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
                <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
                <div>
                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button>
            </section>
    </article>
    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>©
                <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span>2013 </span>»
                <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
                <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>»
                <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>
    <script src="https://cdn.webrtc-experiment.com/common.js"> </script>
</body>
</html>
